import React from 'react'
import CSSModules from 'react-css-modules'
import styles from '../css/Nav/Nav.scss'

class Nav extends React.Component{
    selectIndex(path){
        this.props.history.push(path)
    }

    render(){
        const _Path = this.props.history.location.pathname;
        const navList = [
            {
                path: '/',
                icon:   require('../images/index/search.80632951.png'),
                active: require('../images/index/search_on.0bf771a3.png'),
                title: '发现',
            },
            {
                path: '/mywk',
                icon:  require('../images/index/mywk.e209ea7a.png'),
                active:require('../images/index/mywk_on.9ae1839f.png'),
                title: '我的微课',
            },
            {
                path: '/account',
                icon:  require('../images/index/personal.79792171.png'),
                active:require('../images/index/personal_on.d89012ba.png'),
                title: '个人中心',
            },
        ]
        return (
            <div styleName="nav_menu">
            {navList.map(v=>(
                <div styleName="nav_menu_item" key={v.path} onClick={()=>this.selectIndex(v.path)}>
                    <img src={v.path=== _Path? v.active : v.icon} alt='/'/>
                </div>
            ))}
            </div>
        )
    }
}

export default CSSModules(Nav, styles);